<template>
  <div class="setting page">
    <van-nav-bar
        title="绑定银行卡"
        left-arrow
        @click-left="$router.back()"
    />
    <div class="main-box">
      <div class="change-div">
        <div>请选择添加类型</div>
        <ul>
          <li :class="menu === 0 ? 'active-change-div' : ''" @click="onChangeMenu(0)">微信</li>
          <li :class="menu === 1 ? 'active-change-div' : ''" @click="onChangeMenu(1)">支付宝</li>
          <li :class="menu === 2 ? 'active-change-div' : ''" @click="onChangeMenu(2)">银行卡</li>
        </ul>
      </div>
      <div v-if="menu === 0">
        <div class="label">请输入您的身份信息</div>
        <van-field label="真实姓名" v-model="form.bankid" placeholder="请输入真实姓名"/>
        <van-field label="银行名称" v-model="form.bank" :value="current.text" readonly/>
        <p>
          尊敬的会员，为了保障您顺利提现，请填写真实姓名和正确上传微信收款码。（平台会保障您的资金和隐私安全，请您放心）</p>
        <div class="upload-div">
          <van-uploader :after-read="onRead" :max-count="1" v-model="updateImg" title="微信收款码">
            <img :src="require('../../assets/img/tip/certificate.png')">
          </van-uploader>
        </div>
        <van-swipe :vertical="true" style="width: 300px; height: 520px; margin: 0px auto;">
          <van-swipe-item style="height: 520px">
            <div class="padding-b">
              <div class="img-wrapper">
                <div class="van-image img" style="overflow: hidden; border-radius: 5px;"><img
                    :src="require('../../assets/img/tip/1.png')" class="van-image__img" style="object-fit: cover;">
                  <!----><!---->
                </div>
              </div>
            </div>
          </van-swipe-item>
          <van-swipe-item style="height: 520px">
            <div class="padding-b">
              <div class="img-wrapper">
                <div class="van-image img" style="overflow: hidden; border-radius: 5px;"><img
                    :src="require('../../assets/img/tip/2.png')" class="van-image__img" style="object-fit: cover;">
                  <!----><!---->
                </div>
              </div>
            </div>
          </van-swipe-item>
          <van-swipe-item style="height: 520px">
            <div class="padding-b">
              <div class="img-wrapper">
                <div class="van-image img" style="overflow: hidden; border-radius: 5px;"><img
                    :src="require('../../assets/img/tip/3.png')" class="van-image__img" style="object-fit: cover;">
                  <!----><!---->
                </div>
              </div>
            </div>
          </van-swipe-item>
          <van-swipe-item style="height: 520px">
            <div class="padding-b">
              <div class="img-wrapper">
                <div class="van-image img" style="overflow: hidden; border-radius: 5px;"><img
                    :src="require('../../assets/img/tip/4.png')" class="van-image__img" style="object-fit: cover;">
                  <!----><!---->
                </div>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div v-if="menu === 1">
        <div class="label">请输入您的身份信息</div>
        <van-field label="真实姓名" v-model="form.name" placeholder="请输入"/>
        <div class="label">请输入您的支付宝(11位数字)</div>
        <van-field label="支付宝" v-model="form.bankid" placeholder="请输入"/>
        <van-field label="银行名称" :value="form.bank" readonly/>
        <p>
          尊敬的会员，为了保障您顺利提现，请填写真实姓名和正确上传支付宝收款码。（平台会保障您的资金和隐私安全，请您放心）
        </p>
      </div>
      <div v-if="menu === 2">
        <div class="label">请输入您的身份信息</div>
        <van-field v-model="form.name" label="真实姓名" placeholder="请输入"/>
        <div class="label">请输入您的银行卡信息</div>
        <van-field v-model="form.bankid" label="银行卡号" placeholder="请输入"/>
        <van-field label="银行名称" :value="current ? current.text : ''" @click="show = true" placeholder="请选择银行"
                   readonly/>
        <p>
          尊敬的会员，为了保障您顺利提现，请填写真实姓名和正确银行卡号。（平台会保障您的资金和隐私安全，请您放心）
        </p>
      </div>
      <van-button class="bindCard" :class="allowAdd ? 'active':''" :disabled="!allowAdd" @click="submit">确定绑定
      </van-button>
      <van-overlay :show="show" class-name="mask" style="z-index: 10; animation-duration: 0.35s;"/>
      <van-picker v-if="show" class="picker" :columns="bankList" show-toolbar @confirm="onConfirm" @cancel="onCancel"/>
    </div>
  </div>
</template>
<script>
import {addCard, getBankList} from "@api/Card";
import {Toast} from "vant";
import {uploadImg} from "@api/Index";

export default {
  name: "BindCard",
  computed: {
    allowAdd: function () {
      if (this.menu === 0) {
        return this.form.bankid && this.form.img;
      } else if (this.menu === 1) {
        return this.form.name && this.form.bankid;
      } else {
        return this.form.bank && this.form.bankid && this.form.name;
      }
    }
  },
  data: function () {
    return {
      updateImg: undefined,
      alipay: {
        text: "支付宝",
        value: "aliPay"
      },
      wxPay: {
        text: "微信",
        value: "wxPay"
      },
      current: {
        text: "微信",
        value: "wxPay"
      },
      bankList: [],
      menu: 0,
      show: false,
      form: {
        bank: "微信",
        bankid: undefined,
        type: 1,
        img: undefined,
        name: undefined
      }
    }
  },
  created() {
    this.initBankList();
  },
  methods: {
    onRead: function (file) {
      uploadImg(file).then(v => {
        this.form.img = v.data;
      })
    },
    onChangeMenu: function (num) {
      this.form = {
        bank: undefined,
        bankid: undefined,
        type: undefined,
        img: undefined,
        name: undefined
      }
      this.menu = num;
      if (num === 0) {
        this.current = this.wxPay;
        this.form.type = 1;
        this.form.bank = "微信";
      } else if (num === 1) {
        this.current = 1;
        this.form.type = 2;
        this.form.bank = "支付宝";
      } else {
        this.form.type = 3;
        this.current = undefined;
      }
    },
    initBankList: function () {
      getBankList().then(v => {
        this.bankList = v.data;
      })
    },
    onConfirm: function (v) {
      this.current = v;
      this.show = false;
      this.form.bank = v.text;
    },
    onCancel: function () {
      this.show = false;
    },
    submit: function () {
      let that = this;
      Toast.loading({
        message: "添加中, 请稍后",
        forbidClick: true,
        duration: 0,
        onOpened: function () {
          addCard(that.form).then(() => {
            Toast.clear();
            that.$store.dispatch("UpdateUserInfo");
            that.$router.push({
              name: "CardList",
              params: {
                refresh: 1
              }
            })
          }).catch(() => {
            Toast.clear();
          })
        }
      })
    }
  }
};
</script>
<style scoped>
::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

::v-deep .van-picker {
  background-color: #f5dcf1;
}

.setting {
  height: 100vh;
  overflow: auto;
  background: #fcf0fa
}

.setting .nav {
  background: linear-gradient(90deg, #fff, #fff)
}

.setting .main-box {
  height: calc(100vh - 2.66667rem);
  overflow: auto
}

.setting .main-box .van-field-label {
  color: #cacaca
}

.setting .main-box .van-icon-success {
  color: #fcf0fa
}

.setting .main-box .change-div > * {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .37333rem;
  font-weight: 700;
  color: #fa59b5
}

.setting .main-box .change-div > div {
  height: .8rem;
  width: 100%
}

.setting .main-box .change-div > ul {
  height: 1.06667rem;
  width: 100%;
  border: .02667rem solid #979799
}

.setting .main-box .change-div > ul > li {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

.setting .main-box .change-div > ul .active-change-div {
  background: linear-gradient(90deg, #e38afb, #fa59b5);
  color: #fff
}

.setting .main-box .upload-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: .26667rem
}

.setting .main-box .upload-div .upload-title-div {
  margin-bottom: .26667rem;
  display: flex;
  align-items: center;
  justify-content: center
}

.setting .main-box .upload-div .upload-title-div span {
  font-size: .37333rem;
  color: #ff4ea3;
  font-weight: 700;
  margin: 0 .26667rem
}

.setting .main-box .upload-div .upload-title-div .iconfont-wt:first-child {
  visibility: hidden
}

.setting .main-box .upload-div .upload-title-div .iconfont-wt {
  color: #ff4ea3;
  font-weight: 700
}

.setting .main-box .upload-div .upload-title-div .unline-span {
  margin-left: .26667rem;
  text-decoration: underline;
  font-weight: 400
}

.setting .main-box .upload-div .upload-title-div .unline-span:first-child {
  visibility: hidden
}

.setting .main-box .upload-div > p {
  font-size: .32rem;
  margin: .13333rem auto;
  color: #ff4ea3
}

.setting .main-box .upload-div .uploader {
  margin: 0 auto;
  position: relative
}

.setting .main-box .upload-div .uploader .upload-txt-div {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .4rem;
  font-weight: 700
}

.setting .main-box .upload-div .uploader .van-uploader__wrapper {
  background-color: #242424
}

.setting .main-box .upload-div .uploader .ashbin-icon {
  position: absolute;
  top: .26667rem;
  right: .26667rem
}

.setting .main-box .upload-div .uploader img {
  height: 3rem;
  transform: translate(.5%);
  -o-object-fit: cover;
  object-fit: cover
}

.setting .main-box .label {
  padding: .37333rem;
  font-size: .42667rem;
  color: #797878
}

.setting .main-box .agree {
  display: flex;
  align-items: center;
  padding: .37333rem
}

.setting .main-box .agree .content {
  font-size: .37333rem;
  margin-left: .21333rem;
  color: #979799
}

.setting .main-box .agree .content .right {
  color: #ff253f
}

.setting .main-box p {
  padding: 0 .37333rem;
  font-size: .37333rem;
  color: #ee0a24;
  margin-top: .26667rem
}

.setting .bindCard {
  margin: .26667rem .4rem 0;
  width: calc(100% - .8rem);
  height: 1.22667rem;
  line-height: 1.22667rem;
  border-radius: .66667rem;
  color: #fcf0fa;
  font-size: .42667rem;
  font-weight: bolder;
  border: none;
  background-color: #cacacc
}

.setting .active {
  background: linear-gradient(90deg, #fa59b5, #e38afb)
}

.setting .opreator {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center
}

.setting .opreator .cannel {
  padding: .37333rem;
  color: #797878
}

.setting .opreator .determine {
  color: #e38afb;
  padding: .37333rem
}

.setting .mask {
  background-color: rgba(0, 0, 0, .3)
}

.setting .picker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10
}

</style>
